<template>
  <div class="order">
    <!-- 导航栏 -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="清空列表信息"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="lists" v-for="data in list" :key="data._id">
      <div class="lists-info" @click="toorderdetail(data._id)">
        <p>收货人姓名：{{data.receiver}}</p>
        <p>收货人地址：{{data.regions}}</p>
        <p>下单时间：{{data.updatedAt}}</p>
        <p>价格:{{data.price}}</p>
        <button @click="del(data._id)" >删除</button>
      </div>
    </div>
  </div>
</template>

<script>
import { reqgetorderapi,reqdelorderoneapi,reqdelorderallapi } from "../../api/order";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //返回上一步
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    //清空列表信息
    async onClickRight(){
      const ids=[];
      this.list.forEach((item)=>{ids.push(item._id)})
      console.log(ids);
      const result=await reqdelorderallapi(ids);
      console.log(result);
       this.getorder();
      Toast("清空列表成功");
    },
    //获取订单列表
    async getorder() {
      const per = 5;
      const page = 1;
      const result = await reqgetorderapi(per, page);
      console.log(result);
      this.list = result.orders;
    },
    // 根据id删除订单详情
    async del(id){
      const result=await reqdelorderoneapi(id)
      console.log(result);
       Toast("删除成功");
         this.getorder();
    },
    //跳转到订单详情
    toorderdetail(id){
      this.$router.push({path:`/toorderdetail/${id}`})
    }
  },
  created() {
    this.getorder();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.lists-list {
  padding-bottom: 50px;
}
.lists {
  display: flex;
  height: 160px;
  width: 100%;
  justify-content: space-around;
  align-content: center;
  margin-bottom: 20px;
  background: #ccc;
}
.lists-info {
  flex: 3;
  position: relative;
}
button{
  position: absolute;
  right: 30px;
  bottom: 0px;
}
</style>
